<template>
  <el-row>
    <el-col :span="4">
      <div class="flex justify-start item-center column-gap-1">
        <el-input @input="handleChangeUpperPiece"></el-input>
        <div style="width: 90px">件：~</div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="flex justify-start item-center column-gap-1">
        <el-input @input="handleChangeLowerPiece"></el-input>
        <div>件：</div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="flex justify-start item-center column-gap-1">
        <el-input @input="handleChangeLowerMoney"></el-input>
        <div style="width: 90px">元/件</div>
      </div>
    </el-col>
    <el-col :span="1">
      <el-button
        style="font-size: 16px"
        icon="el-icon-circle-plus-outline"
        circle
        @click="plus(index)"
      ></el-button>
    </el-col>
    <el-col :span="1">
      <el-button
        style="font-size: 16px"
        icon="el-icon-remove-outline"
        circle
        @click="remove(index)"
      ></el-button>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'Price',
  model: {

  },
  props: {
    from: {
      type: [Object, Array],
      default: () => ({
        upperPiece: 0, lowerPiece: 20, money: 0.90
      })
    },
    index: { type: Number, default: 0 }
  },
  methods: {
    handleChangeUpperPiece (value) {
      let tmp = {
        ...this.from[this.index],
        upperPiece: value
      }
      this.from[this.index] = tmp
      this.$emit('update:from', this.from)
    },
    handleChangeLowerPiece () {

    },
    handleChangeLowerMoney () { },
    plus (index) {
      this.$emit('plus', index)
    },
    remove (index) {
      this.$emit('remove', index)

    }
  }
}
</script>
<style lang="scss" scoped>
</style>